<!-- 注册 -->
<template>
	
	<view class="container1">
		<!-- 背景图 -->
		<view class="container1-img1">
			<image src="../../static/login/top-c1.png" mode="aspectFit"></image>
		</view>
		<view class="container1-img2">
			<image src="../../static/login/bot-c2.png" mode="aspectFit"></image>
		</view>
		<!-- 登录 -->
		<view class="middle">
			<view class="middle-item">
				<image src="../../static/login/account-icon.png" aspectFit></image>
				<input maxlength="11" v-model="mobile" class="mobile" type="text" value="" placeholder="请输入您的手机号" placeholder-class="placeholder" />
				<mobile-code class="btn_code " :mobile="mobile" templateCode="SMS_1993234234"></mobile-code>
			</view>
			<view class="middle-item" >
				<image src="../../static/login/code.png" mode="aspectFit"></image>
				<input v-model="code" maxlength="6" class="code" type="text" value="" placeholder="请输入您的验证码" placeholder-class="placeholder" />
			</view>
			
			<view class="middle-item" >
				<image src="../../static/login/password-icon.png" mode="aspectFit"></image>
				<input v-model="password" maxlength="12" type="password" value="" placeholder="请输入您的密码" placeholder-class="placeholder"/>
			</view>
			
			<view class="middle-item"v-if="isregister" >
				<image src="../../static/login/password-icon.png" mode="aspectFit"></image>
				<input  v-model="twopassword" maxlength="12" type="password" value="" placeholder="请再次输入您的密码" placeholder-class="placeholder" />
			</view>
			
			<view class="middle-item" v-if="isregister" >
				<image src="../../static/login/account-icon.png" aspectFit></image>
				<input  v-model="nickName" type="text"  placeholder="请输入您的昵称" placeholder-class="placeholder" />
			</view>
			
			<view class="middle-item" v-if="isregister" >
				<image src="../../static/login/account-icon.png" aspectFit></image>
				<radio-group  @change="radioChange" class="center">
								 <label class="uni-list-cell uni-list-cell-pd row" v-for="(item, index) in sex" :key="index">
									 <view>
										  <radio :value="item.value" :checked="item.checked" />
									 </view>
									  {{item.label}}
								 </label>
				</radio-group>
			</view>
			 
			
			<view class="middle-item loginbtn"v-if="isregister" @click="regbtn">
				<text >立即注册</text>
			</view>
			<view class="middle-item loginbtn"v-if="!isregister" @click="forgetbtn">
					<text >修改密码</text>
			</view>

		</view>
		
	
	</view>
	
</template>

<script>
	
	import api from '@/api/login.js'
	export default {
		data (){
			return{
				isregister: true,
				mobile:'',
				password:'',
				twopassword:'',
				code:'',
				nickName:'',
				sex: [
					  {  label: "男",
					     value: 1,
					     checked: true,
						},{
				          label: "女",
				          value: 0
				      }],
				checkSex: 1,
				
				
			}
		},
		onLoad(option) {
			this.isregister = true;
			// console.log('option',option)
			if(option.isregister == '0') {
				this.isregister = false;
			}
			
		},
		methods: {
			radioChange(e){
				 this.checkSex  = e.detail.value
				 console.log( '性别',this.checkSex  )
			},
			// 忘记密码事件
			async forgetbtn() {
				const { mobile, password ,code } = this
				if(!this.$util.checkStr(mobile, 'mobile')) {
					this.$util.msg('请输入有效手机号码')
					return
				}
				if(!this.$util.checkStr(code, 'mobileCode')) {
					this.$util.msg('请输入6位数字验证码')
					return
				}
				let Senddata = {
					userMobile:this.mobile,
					password : this.password
				}
				uni.showLoading({title: '修改中', mask: true})
				const res = await api.forgetPassword(Senddata)
				uni.hideLoading()
				if(res.code === 20000) {
					uni.showModal({
						content: res.message ,
						success: async  (res) => {  
							 if (res.confirm){
								 this.navTo('/pages/login/login');
							 }
						}
					})
					
				}else {
					this.$util.msg(res.message)
				}
				
				
				
			},
			// 注册事件
			async regbtn(){
				const { mobile, password ,twopassword ,code } = this
				if(!this.$util.checkStr(mobile, 'mobile')) {
					this.$util.msg('请输入有效手机号码')
					return
				}
				if(!this.$util.checkStr(password, 'pwd')) {
					this.$util.msg('密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线')
					return
				}
				if(!this.$util.checkStr(twopassword, 'pwd')) {
					this.$util.msg('再次输入的密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线')
					return
				}
				if(!this.$util.checkStr(code, 'mobileCode')) {
					this.$util.msg('请输入6位数字验证码')
					return
				}
				if(this.password !== this.twopassword) {
					this.$util.msg('两次的密码不一致！')
					return
				}
				if( this.nickName == '') {
					this.$util.msg('昵称不能为空！')
					return
				}
				let Senddata = {
					userMobile:this.mobile,
					password : this.password,
					nickName: this.nickName,
					sex : this.checkSex
				}
				 console.log( '注册信息:',Senddata )
				// //调用接口
				uni.showLoading({title: '注册中', mask: true})
				// // 调用接口发送手机号和密码
				const res = await api.register(Senddata)
				uni.hideLoading()
				
				if(res.code === 20000) {
					// 登录成功的函数
					// this.navTo('/pages/login/login');
					uni.showModal({
						content: res.message ,
						success: async  (res) => {  
							 if (res.confirm){
								 this.navTo('/pages/login/login');
							 }
						}
					})
					
				}else {
					this.$util.msg(res.message)
				}
				
			}
		}
	}
</script>

<style lang="less">
	page{
			background-color: #fff;
			font-size: 35upx;
			font-family: SimHei;
			color: #262626;
		}
		.header{
			display: flex;
			justify-content: space-between;
			padding: 30upx;
			align-items: center;
			image{
				width: 17upx;
				height: 30upx;
			}
		}
		.container1{
			&-img1{
				width: 243upx;
				height: 270upx;
				position: absolute;
				top:0;
				left:0;
				image{
					width: 100%;
					height: 100%;
				}
			}
			&-img2{
				width: 218upx;
				height: 350upx;
				position: absolute;
				bottom:150upx;
				right:0;	
				image{
					width: 100%;
					height: 100%;
				}
			}
			.middle{
				
				width: 100%;
				z-index:99;
				&-item{
					display: flex;
					background-color: #e0e5ff;
					width: 75%;
					padding: 30upx 40upx;
					margin: 60upx auto;
					border-radius: 50upx;
					font-size: 30upx;
					
					image{
						width: 32upx;
						height: 40upx;
					}
					input{
						margin-left: 25upx;
					}
					radio-group {
						width: 100%;
						label{ 
							width: 40%;
							margin-left: 20rpx;
						}
					}
					.placeholder{
						font-size: 30upx;
					}
					.mobile {
						width: 60%;
					}
					.code{
						width: 70%;
					}
					.btn_code{
						width: 40%;
						font-size: 30rpx;
						margin-left: 20rpx;
						border-radius: 20rpx;
					}
					.getcode{
						text-align: center;
						display: flex;
						align-items: center;
						border: none;
						font-size: 24rpx;
						padding: 0;
						margin-left: 10px;
						outline: none;
						  border-radius: 0;
						  background-color: transparent;
						  line-height: inherit;
						  width: max-content;
					}
					.getcode:after{
						border: none;
					}
				}
				.loginbtn{
					font-size: 35upx;
					display: flex;
					align-items: center;
					text-align: center;
					color: #fff;
					background-image: linear-gradient(to right, #a9b7ff , #3e5eff);
					background-size: 100% 100%;
					text{
						margin: 0 auto;
					}
				}
				.info{
					margin-top: 30upx;
					text-align: center;
					font-size: 30upx;
				}
				.regbtn{
					color:#3e5eff;
					margin: 0 10px;
				}
			}
			
		}
</style>

